<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="Public/amaze/css/amazeui.min.css"/>
    <link rel="stylesheet" href="Public/amaze/css/admin.css">
</head>
<body style="overflow-y:auto;">
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->


<div class="am-cf admin-main am-g">
    <div class="am-u-sm-6 am-u-lg-centered">
        <!-- content start -->
        <div class="admin-content">
            <div class="admin-content-body am-margin-xl">
                <div class="am-g am-margin-xl">
                    <div class="am-u-sm-8"><span class="am-text-success">运行状态</span> </div>
                    <div class="am-u-sm-4">
                        <button type="button" class="am-btn am-btn-primary btn-loading-example" disabled
                                data-am-loading="{spinner: 'circle-o-notch', loadingText: '启动中...', resetText: '启动完成'}">
                            重新启动
                        </button>
                    </div>
                </div>

                <hr/>

                <div class="am-cf am-padding am-padding-bottom-0">
                    <div class="am-fl"><p class="am-text-primary am-text-lg">输出日志：</p></div>
                </div>

                <div class="am-g error-log">
                    <div class="am-u-sm-12 am-u-sm-centered">
        <pre class="am-pre-scrollable">


        </pre>
                        <p></p>
                    </div>
                </div>
            </div>

            <footer class="admin-content-footer">
                <hr>
                <p class="am-padding-left">© 2018 AllMobilize, Inc. Licensed under MIT license.</p>
            </footer>
        </div>
        <!-- content end -->
    </div>
</div>


<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="Public/amaze/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--<![endif]-->
<script src="Public/amaze/js/amazeui.min.js"></script>
<script src="Public/amaze/js/app.js"></script>
<script>
    /**
     * 声明一个WebSocket
     * @type {WebSocket}
     */
    var ws = new WebSocket('ws://' + '192.168.168.168:9905' + '/stat/f739cI5M6gbzGfS2950J2MF0wVnygHDfGRA6gvTeNQ');
    /**
     * 接收到服务发来的消息时触发
     * @param e
     */
    ws.onmessage = function (response) {
        // 此处执行收到消息后的业务逻辑
        var result = JSON.parse(response.data);
        var data = result.data;
        switch (result.type) {
            case 'open':
                $(".am-pre-scrollable").html('').append(data.msg + '<br/>');
                break;

            case 'qing':
                // 开始写入模型
                $(".am-pre-scrollable").append(data.msg + '<br/>').scrollTop($(".am-pre-scrollable")[0].scrollHeight);
                if (data.msg == '启动完成') {
                    $('.btn-loading-example').button('reset');
                    $(".am-text-success").html('').append(data.msg);
                }
                break;

            case 'success':
                $(".am-text-success").html('').append(data.msg);
                break;
        }
    };
    ws.onclose = function (response) {
        // alert('连接被关闭');
    }


    $('.btn-loading-example').click(function () {
        var $btn = $(this)
        $btn.button('loading');
        ws.send('restart');
    });
</script>
</body>
</html>
